<template>
  <a-modal
    title="用户预览"
    :maskClosable="false"
    wrapClassName="common_modal user_preview_modal"
    v-model:open="visible"
    @cancel="handleCancel"
    centered
    width="50%"
  >
    <template #footer>
      <a-button @click="handleCancel">关闭</a-button>
    </template>
    <a-descriptions layout="vertical" size="small" bordered :column="24">
      <a-descriptions-item label="用户名" :span="8"> {{ userInfo.userName }} </a-descriptions-item>
      <a-descriptions-item label="性别" :span="8"> {{ userInfo.userSexStr }} </a-descriptions-item>
      <a-descriptions-item label="用户头像" :span="8">
        <img
          style="width: 120px; padding: 10px"
          :src="userInfo.userPhoto"
          @click="previewLogo()"
          alt="用户头像"
        />
      </a-descriptions-item>
      <a-descriptions-item label="所属医院" :span="12">
        {{ userInfo.hospName }}
      </a-descriptions-item>
      <a-descriptions-item label="绑定设备" :span="12">
        {{ userInfo.equipmentName }} - {{ userInfo.equipmentModel }}
      </a-descriptions-item>
      <a-descriptions-item label="账号" :span="8"> {{ userInfo.userAccount }} </a-descriptions-item>
      <a-descriptions-item label="联系电话" :span="8">
        {{ userInfo.userPhone }}
      </a-descriptions-item>
      <a-descriptions-item label="邮箱" :span="8"> {{ userInfo.userEmail }} </a-descriptions-item>
      <a-descriptions-item label="资格证书" :span="12">
        <span v-if="imgList.length" @click="toPreviewImg()"><FileImageOutlined /></span>
        <span v-for="(item, index) in pdfList" :key="index" @click="toPreviewPdf(item)">
          <FileOutlined />
        </span>
        <span v-if="imgList.length || pdfList.length">（点击查看）</span>
      </a-descriptions-item>
    </a-descriptions>
  </a-modal>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
import { FileImageOutlined, FileOutlined } from '@ant-design/icons-vue'
interface ImgType {
  src: string
  sort: number
}
const visible = ref(false)
const userInfo = ref<any>({})
const imgList = ref<ImgType[]>([])
const pdfList = ref<string[]>([])
function getFileType(url: string) {
  let index = url.lastIndexOf('.')
  let ext = url.substr(index + 1)
  if (ext === 'pdf') {
    return 'pdf'
  } else {
    return 'img'
  }
}
function showModal(data: any) {
  visible.value = true
  imgList.value = []
  pdfList.value = []
  userInfo.value = data
  let tempList = data.certificateUrls
  if (tempList && tempList.length) {
    tempList.forEach((urlItem: string, index: number) => {
      let urltype = getFileType(urlItem)
      if (urltype === 'img') {
        imgList.value.push({ src: urlItem, sort: index + 1 })
      } else {
        pdfList.value.push(urlItem)
      }
    })
  }
}
function handleCancel() {
  visible.value = false
}
function toPreviewPdf(url: string) {
  console.log('%c [ url ]-89', 'font-size:13px; background:pink; color:#bf2c9f;', url)
}
function toPreviewImg() {
  console.log('%c [  ]-105', 'font-size:13px; background:pink; color:#bf2c9f;')
}
function previewLogo() {
  console.log('%c [  ]-77', 'font-size:13px; background:pink; color:#bf2c9f;')
}
defineExpose({
  showModal
})
</script>
